import React, {
   useState, 
   useEffect,
   useRef
  } from "react";
  import MyRefTest from "./MyRefTest";

const App = () => {
  // [变量， 更改变量的方法] = useState('变量默认值')
  const [title, setTitle] = useState("2208A");

  const [name, setName] = useState("王帅");

  const refDom = useRef()

  const [page, setPage] = useState({
    title: "2208A",
    name: "王帅",
  });

  const newTitle = useRef('新的标题')

  // 副作用函数（模拟生命周期）
  // 如果第二个参数空数组的话：模拟生命周期：初始化生命周期
  // 如果没有二个参数的话，既模拟初始化生命周期，也模拟更新阶段的生命周期
  // 如果第二个参数有内容，模拟初始化生命周期，以及监听数组中内容的变化
  useEffect(() => {
    console.log(title);
  }, [title]);

  useEffect(() => {
    console.log(name);
  }, [name]);

  const changeInfo = () => {
    setTitle("鲲翔");

    setName("王不帅");

    setPage({
      ...page,
      title: "鲲翔",
    });
  };

  const getRef = () => {
    console.log(refDom)
    newTitle.current = '修改之后的title'
  }

  const getA = () => {
    console.log(newTitle.current)
  }

  return (
    <div>
      <h1>{title}</h1>
      <h2>{name}</h2>

      <h3>{page.title}</h3>
      <h3>{page.name}</h3>

      {/* <div className="ref-test-box" ref={refDom}>
        我是测试ref的节点{newTitle.current}
      </div> */}
      <MyRefTest title={title} ref={refDom} />

      <button onClick={getRef}>修改a</button>

      <button onClick={getA} >获取a</button>

      <button onClick={changeInfo}>更改</button>
    </div>
  );
};

export default App;
